// import liraries
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';
import { Icon } from 'react-native-elements';

import {
  Navbar,
  Divider,
} from '../../DodLibrary/index';


// create a component
class NavBar extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="NavBar"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView>
          <Divider />
          <Navbar
            title="Button"
            leftIcon={{
              name: 'arrow-back',
              color: '#fff',
            }}
            titlePos="center"
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftText="菜单"
            leftTextColor="#fff"
            rightIcon={{
              name: 'delete',
              color: '#fff',
            }}
            rightOnPress={() => alert('点击了删除')}
            rightText="删除"
            rightTextColor="#fff"
          />
          <Divider />

          <Navbar
            title="Button"
            leftIcon={{
              name: 'apps',
            }}
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftTextColor="#fff"
          />
          <Divider />

          <Navbar
            title="Button"
            leftIcon={{
              name: 'apps',
              color: '#fff',
            }}
            titleColor="#fff"
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftTextColor="#fff"
            showStatus={false}
            img="http://qiniu.enjoymemory.cn//image/background2.png"
          />
          <Divider />

          <Navbar
            title="Button"
            leftIcon={{
              name: 'apps',
              color: '#fff',
            }}
            titlePos="center"
            titleColor="#fff"
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftTextColor="#fff"
            showStatus={false}
            img="http://qiniu.enjoymemory.cn//image/background2.png"
          />
          <Divider />

          <Navbar
            title="Button"
            leftIcon={{
              name: 'apps',
              color: '#fff',
            }}
            titlePos="right"
            titleColor="#fff"
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftTextColor="#fff"
            showStatus={false}
            img="http://qiniu.enjoymemory.cn//image/background2.png"
          />
          <Divider />

          {/* customize title which means thath you can put a SegmentedControll component here */}
          <Navbar
            title={<Icon name="logo-google" type="ionicon" size={30} color="#fff" />}
            leftIcon={{
              name: 'apps',
              color: '#fff',
            }}
            titlePos="center"
            titleColor="#fff"
            leftOnPress={() => navigation.navigate('DrawerOpen')}
            leftTextColor="#fff"
            showStatus={false}
            img="http://qiniu.enjoymemory.cn//image/background2.png"
          />
          <Divider />
        </ScrollView>
      </View>
    );
  }
}

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

// make this component available to the app
export default NavBar;
